<script setup>
import {h, reactive} from 'vue';
import * as icons from '@ant-design/icons-vue';
import axios from "axios";
import webConfig from "@/GlobalParas.js";

// defineProps({
//   items:{
//     type:Array,
//     default:[]
//   }
// })

let emit = defineEmits(['onMenuClick']);

function menuClick(eventObj) {
  // console.log(eventObj)
  let params = {}
  params.label = eventObj.item.originItemValue.label;
  params.key = eventObj.key;
  params.funPath = eventObj.item.funPath;
  params.routerPath = eventObj.item.routerPath;



  emit("onMenuClick", params, eventObj);
}

let items = reactive([]);
getRoleFunctions();


function getRoleFunctions() {
  axios.post(webConfig.postUrl + "/systemFunction/getAllMenuFunctions", null).then((res) => {
    let allRoleFunctions = res.data;
    // console.log(items);

    getSubFunctions(allRoleFunctions, "", items)//递归获取数据库的功能
    // console.log(subFunctions)
  })
}

function getSubFunctions(AllFunctions, parentFunctionId, items) {
  let subFunctions;
  subFunctions = AllFunctions.filter(function (functionItem) {
    if (parentFunctionId === "") {
      return functionItem.parentFunctionId === null;
    } else {
      // console.log(parentFunctionId)
      return functionItem.parentFunctionId === parentFunctionId;
    }
  });

  if (subFunctions.length === 0 && parentFunctionId !== "") {
    items.children = null;
    items.type = "functionItem"
  }
  for (const functionItem of subFunctions) {
    let funItem = {};
    funItem.label = functionItem.functionName;
    funItem.key = functionItem.tableKey;
    funItem.icon = () => h(icons[functionItem.icon]);
    funItem.type = "parentItem";
    funItem.routerPath = functionItem.routerPath
    funItem.children = [];


    if (parentFunctionId === "") {
      funItem.funPath = functionItem.functionName
      items.push(funItem);
    } else {
      funItem.funPath = items.funPath + ' -> ' + functionItem.functionName
      items.children.push(funItem)
    }
    getSubFunctions(AllFunctions, functionItem.tableKey, funItem)
  }
  return subFunctions;
}

</script>

<template>
  <div>
    <a-menu
        style="width: 220px;background-color: #3c414a;"
        mode="inline"
        theme="dark"
        :open-keys="['001','002','003']"
        :items="items"
        @click="menuClick"
    ></a-menu>
  </div>
</template>

<style scoped>

</style>